<template>
  <div>
    <a-breadcrumb style="margin: 16px 0">
      <a-breadcrumb-item>
        <router-link to="/">首页</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/dashboard">工作台</router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>

    <a-layout style="padding: 24px 0; background: #fff">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :selectedKeys="selectedKeys"
          :defaultOpenKeys="['goods']"
          style="height: 100%"
        >
          <a-menu-item key="/dashboard">
            <router-link to="/dashboard"
              ><a-icon type="home" />工作台</router-link
            >
          </a-menu-item>
          <a-sub-menu key="goods">
            <span slot="title"
              ><icon-font type="icon-shangpin"></icon-font>SKU管理</span
            >
            <a-menu-item key="/dashboard/skus">
              <router-link to="/dashboard/skus">SKU列表</router-link>
            </a-menu-item>
            <a-menu-item key="/dashboard/skus_create">
              <router-link to="/dashboard/skus_create">创建SKU</router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '680px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import { Icon } from "ant-design-vue";

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_1892700_45gm6p9utgq.js"
});

export default {
  data() {
    return {
      selectedKeys: []
    };
  },
  watch: {
    $route(to) {
      this.selectedKeys = [to.path];
    }
  },
  created() {
    this.selectedKeys = [this.$route.path];
  },
  computed: {
    user() {
      return this.$store.getters.user;
    }
  },
  components: {
    IconFont
  }
};
</script>
